<template>
    <div>
        <div class="Banner" @click='handleBannerClick'>
            <img class="Banner-img" src="//fuss10.elemecdn.com/a/13/3797dfb3f373fb7271a3645da4772png.png?imageMogr/format/webp/" alt="">
            <div class="Banner-icon">
                <div class="Banner-title">郑州银基乐海水世界</div>
                <div class="Banner-number"><span class="iconfont"></span>15</div>
            </div>
        </div>
        <fade>
            <commoncarousel :imgs='imgs' v-show="showCarousel" @Close='hui'></commoncarousel>
        </fade>
    </div>
</template>
<script>
    import fade  from 'common/fade/FadeAnimation'
    import axios from 'axios'
    import commoncarousel from 'common/carousel/Carousel'
    export default {
        name: 'Banner',
        components: {
            commoncarousel,
            fade
        },
        data(){
            return {
                showCarousel: false,
                imgs:[
                    '//fuss10.elemecdn.com/a/13/3797dfb3f373fb7271a3645da4772png.png?imageMogr/format/webp/',
                    '//fuss10.elemecdn.com/4/3b/621dd5a4cb9c0fffce187dc440fe4png.png?imageMogr/format/webp/'
                ]
            }
        },
        methods : {
            handleBannerClick(){
                this.showCarousel=true
                // alert(1)
            },
            hui (){
                this.showCarousel=false
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .Banner
        overflow hidden
        height 0
        padding-bottom  55%
        position relative
        .Banner-img
            width 100%
        .Banner-icon
            display flex
            position absolute
            left 0
            right 0
            bottom 0
            line-height .6rem
            color #fff
            background-image  linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
            .Banner-title
                flex 1
                font-size .32rem
                padding 0 .2rem
            .Banner-number
                padding 0 .4rem 
                height .32rem
                line-height .32rem
                border-radius .2rem
                background-color rgba(0,0,0,.8)
                font-size .2rem
        
</style>
